<template>
  <el-drawer v-model="drawer" :close-on-click-modal="false" :direction="direction">
    <template #header>
      <h4>编辑房间</h4>
    </template>
    <template #default>
      <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto" label-position="top">
        <el-form-item label="房型" prop="roomType">
          <el-input v-model="ruleForm.roomType" placeholder="请输入房型" :disabled="true"/>
        </el-form-item>
        <el-form-item label="所属酒店" prop="hotelName">
          <el-select v-model="ruleForm.hotelName" placeholder="请选择酒店" style="width: 100%" :disabled="true">
            <el-option v-for="item in hotelList" :key="item.hotelName" :label="item.hotelName" :value="item.hotelName"/>
          </el-select>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model.number="ruleForm.price" placeholder="请输入价格"/>
        </el-form-item>
        <el-form-item label="可用数量" prop="availableCount">
          <el-input-number v-model="ruleForm.availableCount" :min="0" placeholder="请输入可用数量"/>
        </el-form-item>
        <el-form-item label="含早" prop="breakfast">
          <el-radio-group v-model="ruleForm.breakfast">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="图片URL" prop="imageUrl">
          <el-input v-model="ruleForm.imageUrl" placeholder="请输入图片URL"/>
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="submitForm">确认</el-button>
      </div>
    </template>
  </el-drawer>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { updateRoom } from '@/api/room'
import { getHotelList } from '@/api/hotel'

const emit = defineEmits(['refresh'])

interface RuleForm {
  roomType: string
  hotelName: string
  price: number
  availableCount: number
  breakfast: string
  imageUrl: string
}

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  roomType: '',
  hotelName: '',
  price: null,
  availableCount: 1,
  breakfast: '0',
  imageUrl: ''
})
const hotelList = ref([])

const drawer = ref(false)
const direction = ref<'rtl' | 'ltr' | 'ttb' | 'btt'>('rtl')

const rules = reactive<FormRules<RuleForm>>({
  roomType: [{ required: true, message: '请输入房型', trigger: 'blur' }],
  hotelName: [{ required: true, message: '请选择酒店', trigger: 'change' }],
  price: [{ required: true, message: '请输入价格', trigger: 'blur' }],
  availableCount: [{ required: true, message: '请输入可用数量', trigger: 'change' }]
})

const submitForm = () => {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      // 确保数值字段是正确的格式
      const formData = {
        ...ruleForm,
        // 确保数值类型字段是数字
        price: Number(ruleForm.price),
        availableCount: Number(ruleForm.availableCount),
        // 确保breakfast是字符串类型
        breakfast: String(ruleForm.breakfast)
      };
      
      console.log('提交更新房间数据:', formData);
      
      updateRoom(formData).then(res => {
        console.log('更新房间响应:', res);
        
        const result = res.data;
        if (result && result.code === 200) {
          ElMessage.success('修改成功')
          handleClose()
          emit('refresh')
        } else {
          ElMessage.error(result?.msg || '修改失败')
        }
      }).catch(error => {
        console.error('更新房间错误:', error);
        ElMessage.error('网络错误，更新房间失败');
      });
    }
  })
}
const handleClose = () => {
  drawer.value = false
}
const open = (row: any) => {
  console.log('打开编辑抽屉，行数据:', row);
  drawer.value = true;
  
  // 处理breakfast字段，确保是字符串类型
  if (row.breakfast !== undefined) {
    row.breakfast = String(row.breakfast);
  }
  
  Object.assign(ruleForm, row);
  
  // 获取酒店列表
  getHotelList({}).then(res => {
    console.log('获取酒店列表响应:', res);
    const result = res.data;
    if (result && result.code === 200 && result.data) {
      hotelList.value = result.data;
    } else {
      ElMessage.warning('获取酒店列表失败');
    }
  });
}
defineExpose({ open })
</script>
